import React, {useEffect , useState} from 'react';
import './index.scss';
import {useNavigate , NavLink} from "react-router-dom";
import {newFormData , timeout} from "../../utils";
import {login, getLoginUserInfo, getGWRandom, pkiLogin } from "../../service";
import {Input , Form , Button , message} from "antd";
import store , {actions} from '../../redux';
import Icon from "@/plugins/Icon";
const Login = ()=> {
    const navigate = useNavigate();
    const [state , setState] = useState({
        userName: 'admin',
        userPassword: '123456',
    });
    async function loginSuccess({ data, code }) {
        let userInfo;
        if (code === 200) {
            store.dispatch(actions.setToken(data.accessToken));
            userInfo = data.additionalInfo;
            userInfo.userName = userInfo.nickName;
            delete userInfo.nickName;
            const { data: data2, code: code2 } = await getLoginUserInfo();
            if (code2 === 200) {
                userInfo.userLevel = data2.userLevel;
                store.dispatch(actions.setUserInfo(userInfo) );
                message.success('登录成功');
                timeout(() => navigate('/home'), 1000);
            }
        } else if (code === 710) {
            navigate('/register' , {state : {params : data}});
        }
    }
    function toLogin(values) {
        setState({
            userPassword: values.userPassword,
            userName: values.userName,
        });
        login(newFormData(state)).then(loginSuccess);
    }
    return (
        <div className='container'>
            <div>
                <div className='body'>
                    <div className='left'>
                        <p className="p1">Welcome</p>
                        <p className="p2">统一中心</p>
                    </div>
                    <div className='login-form'>
                        <Form name="basic" labelAlign='left' layout="vertical" initialValues={state} onFinish={toLogin} autoComplete="off">
                            <p className="header-title">登录</p>
                            <Form.Item label="用户名" name="userName" rules={[{ required: true, message: '请输入用户名!' }]}>
                                <Input placeholder='请输入用户名' prefix={<Icon name={'UserOutlined'}/>}/>
                            </Form.Item>
                            <Form.Item label="密码" name="userPassword" rules={[{ required: true, message: '请输入密码' }]}>
                                <Input.Password placeholder='请输入密码' prefix={<Icon name={'LockOutlined'}/>}/>
                            </Form.Item>
                            <Form.Item className="loginItem">
                                <Button type="primary" htmlType="submit">登录</Button>
                            </Form.Item>
                            <Form.Item className="href-item">
                                <NavLink to='/register'>没有账号？去注册&gt;&gt;</NavLink>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
};
export default Login;
